<template>
    <div class="form-container"
        style="background: var(--color-background); padding: 1rem; border-radius: var(--border-radius-lg); margin-bottom: 1rem;">
        <h3 style="margin: 0 0 1rem 0;">添加机柜列</h3>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">名称:</label>
            <input v-model="form.name" type="text" placeholder="例如: A (机柜将命名为 A1, A2...)" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">描述:</label>
            <input v-model="form.description" type="text" placeholder="列描述" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">位置坐标:</label>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.25rem;">
                <div>
                    <label
                        style="display: block; margin-bottom: 0.15rem; font-size: 0.85em; color: var(--color-text-light);">X(mm):</label>
                    <input v-model.number="form.position.x" type="number" step="100"
                        style="width: 100%; padding: 0.4rem; font-size: 0.9em;" />
                </div>
                <div>
                    <label
                        style="display: block; margin-bottom: 0.15rem; font-size: 0.85em; color: var(--color-text-light);">Y(mm):</label>
                    <input v-model.number="form.position.y" type="number" step="100"
                        style="width: 100%; padding: 0.4rem; font-size: 0.9em;" />
                </div>
            </div>
            <div style="display: grid; grid-template-columns: 1fr;">
                <div>
                    <label
                        style="display: block; margin-bottom: 0.15rem; font-size: 0.85em; color: var(--color-text-light);">Z(mm):</label>
                    <input v-model.number="form.position.z" type="number" step="100"
                        style="width: 100%; padding: 0.4rem; font-size: 0.9em;" />
                </div>
            </div>
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜间距(mm):</label>
            <input v-model.number="form.spacing" type="number" min="50" max="500" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">颜色:</label>
            <input v-model="form.color" type="color" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜数量:</label>
            <input v-model.number="form.cabinetCount" type="number" min="1" max="10" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜宽度(mm):</label>
            <input v-model.number="form.cabinetWidth" type="number" min="500" max="1000" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜颜色:</label>
            <input v-model="form.cabinetColor" type="color" />
        </div>
        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem;">机柜类型:</label>
            <select v-model="form.cabinetType" style="width: 100%; padding: 0.5rem;">
                <option v-for="(config, type) in CabinetTypeConfig" :key="type" :value="type">
                    {{ config.icon }} {{ config.name }}
                </option>
            </select>
        </div>
        <div style="display: flex; gap: 0.5rem;">
            <button @click="handleSubmit"
                style="flex: 1; padding: 0.5rem; background: var(--color-success); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                确认
            </button>
            <button @click="$emit('cancel')"
                style="flex: 1; padding: 0.5rem; background: var(--color-text-light); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                取消
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CabinetType, CabinetTypeConfig } from '@/stores/datacenter'

const form = ref({
    name: '',
    description: '',
    position: { x: 0, y: 0, z: 0 },
    spacing: 100,
    color: '#2c3e50',
    cabinetCount: 1,
    cabinetWidth: 600,
    cabinetColor: '#666666',
    cabinetType: CabinetType.SERVER
})

const emit = defineEmits<{
    'submit': [data: typeof form.value]
    'cancel': []
}>()

const handleSubmit = () => {
    if (form.value.name.trim() && form.value.cabinetCount > 0) {
        emit('submit', { ...form.value })
        // 重置表单
        form.value = {
            name: '',
            description: '',
            position: { x: 0, y: 0, z: 0 },
            spacing: 100,
            color: '#2c3e50',
            cabinetCount: 1,
            cabinetWidth: 600,
            cabinetColor: '#666666',
            cabinetType: CabinetType.SERVER
        }
    }
}
</script>